<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>seckill</title>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdn.bootcss.com/js-cookie/2.2.0/js.cookie.min.js"></script>

  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script src="https://cdn.bootcss.com/jquery-validate/1.19.0/jquery.validate.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-validate/1.19.0/localization/messages_zh.min.js"></script>

  <link href="/css/base.css" rel="stylesheet">
  <script src="/js/base.js"></script>

  <script>
    $(function () {

      $("#loginForm").validate();
      $("#registerForm").validate();
      
      $('.form-changed').click(function(){
        $(this).closest('form').hide().siblings('form').show();
      });

      $('#login').click(function () {
        if (!$("#loginForm").valid()) {
          return;
        }
        $.ajax({
          type: "POST",
          url: "/login",
          data: $('#loginForm').serialize(),
          dataType: "json",
          success: function(data){
            if (data.status == 0) {
              Cookies.set('current-user', data.result);
              location.href = '/activity';
            } else {
              alert("login error");
            }
          }
        });
      });
      
      $('#register').click(function () {
        if (!$("#registerForm").valid()) {
          return;
        }
        $.ajax({
          type: "POST",
          url: "/register",
          data: $('#registerForm').serialize(),
          dataType: "json",
          success: function(data){
            if (data.status == 0) {
              $('.form-changed').click();
            } else {
              alert("register error");
            }
          }
        });
      });
    });
  </script>
</head>
<body>
<h3 style="text-align: center;">Join seckill activities when you logined.</h3>

<form class="form-horizontal" id="loginForm">
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-4" style="text-align: right;">
      Without account? <a href="javascript:;" class="form-changed">Create one</a>.
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-4">
      <input type="text" class="form-control" id="lusername" name="username" placeholder="username" required maxlength="20" value="tom">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-4">
      <input type="password" class="form-control" id="lpassword" name="password" placeholder="password" required maxlength="20" value="123456">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-4" style="text-align: center;">
      <a href="javascript:;" class="btn btn-default" id="login">Sign in</a>
    </div>
  </div>
</form>

<form class="form-horizontal" id="registerForm" style="display: none;">
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-4" style="text-align: right;">
      Has account? <a href="javascript:;" class="form-changed">Login now</a>.
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-4">
      <input type="text" class="form-control" id="rusername" name="username" placeholder="username" required maxlength="20">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-4">
      <input type="password" class="form-control" id="rpassword" name="password" placeholder="password" required maxlength="20">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-4">
      <input type="password" class="form-control" id="rcpassword" placeholder="password confirm" required maxlength="20" equalTo="#rpassword">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-4" style="text-align: center;">
      <a href="javascript:;" class="btn btn-default" id="register">Sign up</a>
    </div>
  </div>
</form>
</body>
</html>